<template>
	<view class="app-container">


		<AdaptiveNavBar title="售后/退款" :showBack="true" :showHome="false" backgroundColor="#f27b1d" />
		<!-- <view class="content-area" :style="{ marginTop: $navbarUtil.getNavbarTotalHeightRpx() }"> -->
		<view class="content-area">
			<view class="content-header">
				<view class="tabs-list" :style="{ top: statusBarHeight + navbarHeight + 'px'}">
					<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
						:class="{ active: currentTab === index }" @click="switchTab(index)">
						{{tab.title}}
					</view>
				</view>
				<view class="search-container">
					<u-search placeholder="输入搜索的关键词" v-model="searchKey" :showAction="false" height="30"></u-search>
					<view class="search-btn">
						筛选
					</view>
				</view>
			</view>


			<view v-if="orderList?.length" class="order-list"
				:style="{ marginTop: statusBarHeight + navbarHeight + 15 +'px' }">
				<view v-for="(order, index) in orderList" :key="order.id || index" class="order-card">
					<!-- 订单头部 -->
					<view class="order-header">
						<view class="header-left">
							<view class="header-tag">

							</view>
							<text class="merchant-name">{{ order.ppVO?.name || '研学营' }}</text>
							<text class="play-icon">▶</text>
						</view>
						<view class="header-right">
							<!-- 							<view class="status-badge">
								<text class="status-text">{{ getStatusText(order.order.status) }}</text>
							</view>
							<view v-if="order.countdown" class="countdown-badge">
								<text class="countdown-text">{{ order.countdown }}</text>
							</view> -->
						</view>
					</view>

					<!-- 产品信息 -->
					<view class="order-product-card">
						<ProductCard :info="getProductInfo(order)" :orderMode="true" />
					</view>

					<!-- 订单底部 -->
					<view class="order-footer">
						<view class="amount-info">
							<text class="amount-label">数量</text>
							<text class="amount-label">x2人</text>
						</view>

						<view class="action-buttons">
							<view class="btn-pay">
								退款/售后
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js';
	import ProductCard from '@/components/ProductCard.vue';
	export default {
		components: {
			ProductCard
		},
		data() {
			return {
				statusBarHeight: 0,
				navbarTotalHeight: 0,
				navbarHeight: 0,

				tabs: [{
						title: '售后处理',
					},
					{
						title: '处理中',
					},
					{
						title: '待评价',
					},
					{
						title: '申请记录',
					}
				],
				currentTab: 0,
				searchKey: '',
				orderList: [{
					"ppVO": {
						"spuId": 100487,
						"name": "B3->B2->泛营地11",
						"mainImage": "https://abc.qctrips.cn/local-file/download?objectName=1a05dba1-ecd6-43a0-87b3-be768da15da3.png",
						"merchantId": 12,
						"skuId": 200463,
						"title": "亲近自然 - 森林探秘",
						"minYearOld": 3,
						"maxYearOld": 18,
						"specificItinerary": []
					},
					"periodVO": {
						"periodId": 3886870,
						"yearDate": "2026",
						"monthDate": "01",
						"dayDate": "24",
						"weekDate": "周六",
						"price": 0.00,
						"saleArea": ""
					},
					"camperVOS": [{
						"camperId": 27,
						"name": "ww",
						"age": 0,
						"idCard": "ww",
						"photo": null,
						"address": null,
						"gender": null,
						"category": null
					}],
					"order": {
						"id": 83,
						"orderNo": "ORD176248378716435e9b4",
						"userId": null,
						"wxOpenid": "odGav63yq35QTpeZkl5WzD-DeFWM",
						"totalAmount": 0.00,
						"discountAmount": 0.00,
						"actualAmount": 0.00,
						"systemDeduction": 0.00,
						"status": 0,
						"payStatus": 0,
						"payTime": null,
						"transactionId": null,
						"deliveryStatus": 0,
						"refundStatus": 0,
						"remark": "123",
						"name": "12312",
						"phone": "13312341234",
						"email": "123@ww.com",
						"invoice": false,
						"invoiceInfo": "",
						"createTime": "2025-11-07T02:49:47.000+00:00",
						"updateTime": "2025-11-07T02:49:47.000+00:00"
					}
				}, {
					"ppVO": {
						"spuId": 100489,
						"name": "B3->综合研学业务22",
						"mainImage": "https://abc.qctrips.cn/local-file/download?objectName=06e2353a-2e74-4c7c-be1c-b1a967881a1b.png",
						"merchantId": 12,
						"skuId": 200465,
						"title": "科学探索 - 航空相关",
						"minYearOld": 3,
						"maxYearOld": 18,
						"specificItinerary": []
					},
					"periodVO": {
						"periodId": 3886879,
						"yearDate": "2025",
						"monthDate": "11",
						"dayDate": "22",
						"weekDate": "周六",
						"price": 0.00,
						"saleArea": ""
					},
					"camperVOS": [{
						"camperId": 27,
						"name": "ww",
						"age": 0,
						"idCard": "ww",
						"photo": null,
						"address": null,
						"gender": null,
						"category": null
					}, {
						"camperId": 28,
						"name": "啊啊",
						"age": 0,
						"idCard": "1121313",
						"photo": null,
						"address": null,
						"gender": null,
						"category": null
					}],
					"order": {
						"id": 85,
						"orderNo": "ORD17625695551957d28a5",
						"userId": null,
						"wxOpenid": "odGav63yq35QTpeZkl5WzD-DeFWM",
						"totalAmount": 0.00,
						"discountAmount": 0.00,
						"actualAmount": 0.00,
						"systemDeduction": 0.00,
						"status": 0,
						"payStatus": 0,
						"payTime": null,
						"transactionId": null,
						"deliveryStatus": 0,
						"refundStatus": 0,
						"remark": "",
						"name": "啊啊啊",
						"phone": "13312341234",
						"email": "123@qq.com",
						"invoice": false,
						"invoiceInfo": "",
						"createTime": "2025-11-08T02:39:15.000+00:00",
						"updateTime": "2025-11-08T02:39:15.000+00:00"
					}
				}]
			}
		},
		onLoad() {
			this.initNavbarHeight()
		},
		methods: {
			initNavbarHeight() {
				// 使用全局注册的navbarUtil方法
				this.statusBarHeight = this.$navbarUtil.getStatusBarHeight()
				this.navbarHeight = this.$navbarUtil.getNavbarHeight()
				this.navbarTotalHeight = this.$navbarUtil.getNavbarTotalHeight()

				console.log('商户页面 - 导航栏高度:', {
					statusBarHeight: this.statusBarHeight,
					navbarHeight: this.navbarHeight,
					navbarTotalHeight: this.navbarTotalHeight
				})
			},

			switchTab(index) {
				this.currentTab = index
			},

			getProductInfo(order) {
				if (!order) {
					return {};
				}
				const productInfo = {
					// 接送信息
					pickupInfo: order.periodVO?.saleArea || '',

					// 行程信息
					mergedItineraries: [{
						details: [{
							items: [{
								address: order.ppVO?.specificItinerary?.[0]?.items?.[0]
									?.address || '',
							}]
						}]
					}],

					// 主要产品信息
					mainInfo: {
						price: order.periodVO?.price || 0,
						productSpu: {
							mainImage: order.ppVO?.mainImage || '',
							title: order.ppVO?.title || "",
							minYearOld: order.ppVO?.minYearOld || "",
							maxYearOld: order.ppVO?.maxYearOld || "",
							price: order.periodVO?.price || ""
						},
						productSku: {
							title: order.ppVO?.title || "",
							minYearOld: order.ppVO?.minYearOld || "",
							maxYearOld: order.ppVO?.maxYearOld || "",
							price: order.periodVO?.price || ""
						},
					},

					// 渠道和标签信息
					ChannelName: order.ppVO?.name || "",
					// TagName: order.periodVO?.saleArea || "",

					// 兼容ProductCard组件的默认字段
					Title: order.ppVO?.title || "",
					Amount: order.order?.totalAmount || 0,
					NianLing: `${order.ppVO?.minYearOld || "3"}-${order.ppVO?.maxYearOld || "18"}岁`,
					ShiChang: "1日",
					Address: order.ppVO?.specificItinerary?.[0]?.items?.[0]?.address || '',

					// 可选日期
					availableDates: []
				};

				return productInfo;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.content-area {}

	.content-header {}

	.tabs-list {
		display: flex;
		background-color: #fff;
		position: fixed;
		top: 0rpx; // 具体偏移由内联样式覆盖
		left: 0;
		right: 0;
		z-index: 999;
		padding: 10rpx 20rpx;
	}

	.tab-item {
		flex: 1;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tab-item.active {
		border-bottom: 4rpx solid #f27b1d;
	}

	.search-container {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.search-btn {
		background-color: #f27b1d;
		color: #fff;

		border-radius: 20rpx;
		padding: 8rpx 15rpx;
	}

	.order-card {
		background: #fff;
		border-radius: 12rpx;

		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	/* 订单头部 */
	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.header-left {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.header-tag {
				width: 10rpx;
				height: 20px;
				background-color: #f27b1d;
				border-radius: 10rpx;
			}

			.merchant-name {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
			}

			.play-icon {
				color: #666;
				font-size: 24rpx;
			}
		}

		.header-right {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.status-badge {
				background: #fc4735;
				border-radius: 6rpx;
				padding: 8rpx 16rpx;

				.status-text {
					color: #fff;
					font-size: 24rpx;
				}
			}

			.countdown-badge {
				.countdown-text {
					color: #fc4735;
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}
	}

	.order-list {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	/* 产品卡片 */
	.order-product-card {
		margin: 0;
		box-shadow: none;
		border-radius: 0;
		background: transparent;
	}

	.order-footer {
		padding: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.amount-info {
		display: flex;
		padding: 20rpx;
		gap: 10rpx;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.action-buttons {
		display: flex;
		justify-content: flex-end;
	}


	.btn-pay {
		width: 120px;
		height: 80rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: 2rpx solid #fc4735;
		background: #fff;
		border-color: #fc4735;
		color: #fc4735;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>